<template>
  <div class="chat-line chat-line-reply">
    <div class="chat-line-inner">
      <div class="chat-icon">
        <img :src="icon" alt="ChatGPT">
      </div>
      <div class="chat-item">
        <div style="display: flex;align-items: center;">
          <h3 style="padding-right: 6px; border-right:1px #F2F4F6 solid;margin: 0;">AI 智能助手</h3>
          <div class="bar" v-if="createdAt !== ''">
            <span style="color:#868DA5"><el-icon>
                <Clock />
              </el-icon> {{ createdAt }}</span>

          </div>
        </div>
        <div class="content" v-html="content"></div>
        <div class="bar" v-if="createdAt !== ''">
          <span class="bar-item">tokens: {{ tokens }}</span>
          <el-tooltip class="box-item" effect="light" content="复制回答" placement="top">
            <!-- =-= -->
            <el-button type="info" class="copy-reply" :data-clipboard-text="orgContent">
              <el-icon>
                <DocumentCopy />
              </el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue"
import { Clock, DocumentCopy, Position } from "@element-plus/icons-vue";
import md from 'markdown-it';
const markdown = md({
  breaks: true,
  html: false,
  linkify: true,
  typographer: true,
});

markdown.renderer.rules.table_open = function (tokens, idx, options, env, self) {
  return '<div class="table-wrapper"><table>';
};
markdown.renderer.rules.table_close = function (tokens, idx, options, env, self) {
  return '</table></div>';
};
export default defineComponent({
  name: 'ChatReply',
  components: { Position, Clock, DocumentCopy },
  props: {
    content: {
      type: String,
      default: '',
    },
    orgContent: {
      type: String,
      default: '',
    },
    createdAt: {
      type: String,
      default: '',
    },
    tokens: {
      type: Number,
      default: 0,
    },
    icon: {
      type: String,
      default: 'images/gpt-icon.png',
    }
  },
  data() {
    return {
      finalTokens: this.tokens
    }
  },
   mounted() {
    this.renderedContent = markdown.render(this.content);
  }
})
</script>

<style lang="stylus">
.common-layout {
  .chat-line-reply {
    justify-content: center;
    background-color: #ffffff;
    width: 100%;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;

    .chat-line-inner {
      display: flex;
      width: 100%;
      max-width: 900px;
      padding-left: 10px;

      .chat-icon {
        margin-right: 20px;
        img {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          padding: 1px;
        }
      }

      .chat-item {
        position: relative;
        padding: 0 0 0 5px;
        overflow: hidden;

        .content {
          min-height: 20px;
          word-break: break-word;
          padding: 6px 10px;
          color: #666F8D;
          font-size: var(--content-font-size);
          border-radius: 5px;
          overflow: auto;

          a {
            color: #20a0ff;
          }

          img {
            max-width: 600px;
            border-radius: 10px;
          }

          p {
            line-height: 1.5;

            code {
              color: #374151;
              background-color: #e7e7e8;
              padding: 0 3px;
              border-radius: 5px;
            }
          }

          p:last-child {
            margin-bottom: 0;
          }

          p:first-child {
            margin-top: 0;
          }

          .code-container {
            position: relative;
          }

          .table-warpper {
            width: 100%;
            height:100%;
            overflow: auto;
            scrollbar-width: thin !important;
            scrollbar-color: #888 #f1f1f1;
          }

          table {
            border-collapse: collapse;
            width: auto;

            th {
              text-wrap: nowrap;
              white-space: nowrap;
              border: 1px solid lightgray;
              padding: 0.5em 1em;
            }

            td {
              border: 1px solid lightgray;
              padding: 0.5em 1em;
            }

            tr:nth-child(2n) {
              background-color: #f6f8fa;
            }

            tr:hover td {
              background-color: #f2f2f6;
            }
          }

          blockquote {
            margin: 0;
            background-color: #ebfffe;
            padding: 0.8rem 1.5rem;
            border-left: 0.5rem solid;
            border-color: #026863;
            color: #2c3e50;
          }
        }

        .bar {
          padding: 10px;

          .bar-item {
            background-color: #F7F8FA;
            color: #888;
            padding: 3px 5px;
            margin-right: 10px;
            border-radius: 5px;

            .el-icon {
              position: relative;
              top: 2px;
            }
          }

          .el-button {
            height: 20px;
            padding: 5px 2px;
          }
        }
      }

      .tool-box {
        font-size: 16px;

        .el-button {
          height: 20px;
          padding: 5px 2px;
        }
      }
    }
  }
}
</style>